$(document).ready(_ => {
  // 显示与隐藏
  $('#myMenu1').hide();
  $('#search_more').hide();
  $(document).click(_ => {
    $('#search_more').fadeOut('300');
    $('#myMenu1').fadeOut('300');
  });
  $('#search_clear').on('click','#search_more_click', function (e) {
    e.stopPropagation();
    $('#search_more').fadeToggle(200);
  });
  
  // 选择搜索引擎
  $('#search_baidu').click(function (e) { 
    dropDown('baidu.gif');
  });
  $('#search_bing').click(function (e) { 
    dropDown('bing.ico');
  });
  $('#search_google').click(function (e) { 
    dropDown('google.ico');
  });
  
  // 标签
  
  $('.tag_hb').on('click', 'div', function (e) {
    e.stopPropagation();
    console.log($(this).attr('data-id'));
    // $('.tag_diong').fadeToggle('300');
    $('#myMenu1').fadeOut('300');
  });
  $('.tag_diong').click(function (e) { 
    e.stopPropagation();
  });
  $(document).click(_ => {
    $('.tag_diong').fadeOut('300');
  });


  // 渲染标签
  let linkArr = ['https://www.baidu.com/', 'https://cn.bing.com/', 'https://fanyi.baidu.com/', 'https://email.163.com/', 'https://www.bilibili.com/', 'https://v.qq.com/', 'https://www.amap.com/', 'https://www.jd.com/'];
  for (let index = 0; index < 8; index++) {
    if(!linkArr[index]){
      linkArr[index] = 'javascript:;'
    }
    $('.tag_hb').append(`<div data-id="${index}" class="tag_page">
    <a href="${linkArr[index]}">
      <div class="favicon favicon${index}"></div>
    </a>
  </div>`);
  $('.favicon'+index).css('backgroundImage', 'url('+ linkArr[index] +'favicon.ico)');
  }
});




// 选择搜索引擎
function dropDown(name){
  let url ='', formName= '';
  if(name === 'baidu.gif'){
    url = 'http://www.baidu.com/baidu';
    formName = 'wd';
  }else if(name === 'bing.ico'){
    url = 'https://cn.bing.com/search';
    formName = 'q';
  }else if(name === 'google.ico'){
    url = 'https://www.google.com/search';
    formName = 'q';
  }
  $('#search_clear').empty();
  $('#search_clear').append(`<form action=${url}>  
    <input name=${formName} class="saerch_in" type="text" autocomplete="off" />
    <div id="search_more_click" class="icon"><div class="more"></div></div> 
    <input value="" class="saerch_sub" type="submit" />
  </form>`);
  $('#search_more_click').css('background-image', 'url(img/'+name+')');
}